<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollIntoView()</title>
    <style>
        .wrapper{
            margin: 50px auto;
        }
        .content{
            width: 600px;
            height: 500px;
            border: 1px solid red;
            overflow: scroll;
        }
        .item{
            height: 50px;
            width: 700px;
            border: 1px solid skyblue;
        }
    </style>
</head>
<body>
 <div class="wrapper">
     <ul class="content">
         <li class="item">item1</li>
         <li class="item">item2</li>
         <li class="item">item3</li>
         <li class="item">item4</li>
         <li class="item">item5</li>
         <li class="item">item6</li>
         <li class="item">item7</li>
         <li class="item">item8</li>
         <li class="item">item9</li>
         <li class="item">item10</li>
         <li class="item">item11</li>
         <li class="item">item12</li>
         <li class="item">item13</li>
         <li class="item">item14</li>
         <li class="item">item15</li>
         <li class="item">item16</li>
         <li class="item">item17</li>
         <li class="item">item18</li>
         <li class="item">item19</li>
         <li class="item">item20</li>
         <li class="item">item21</li>
         <li class="item">item22</li>
         <li class="item">item23</li>
         <li class="item">item24</li>
         <li class="item">item25</li>
         <li class="item">item26</li>
         <li class="item">item27</li>
         <li class="item">item28</li>
         <li class="item">item29</li>
         <li class="item">item30</li>
         <li class="item">item31</li>
         <li class="item">item32</li>
         <li class="item">item33</li>
         <li class="item">item34</li>
         <li class="item">item35</li>
         <li class="item">item36</li>
         <li class="item">item37</li>
         <li class="item">item38</li>
         <li class="item">item39</li>
         <li class="item">item40</li>
         <li class="item">item41</li>
         <li class="item">item42</li>
         <li class="item">item43</li>
         <li class="item">item44</li>
         <li class="item">item45</li>
         <li class="item">item46</li>
         <li class="item">item47</li>
         <li class="item">item48</li>
         <li class="item">item49</li>
         <li class="item">item50</li>
         <li class="item">item51</li>
         <li class="item item_52">item52</li>
         <li class="item">item53</li>
         <li class="item">item54</li>
         <li class="item">item55</li>
         <li class="item">item56</li>
         <li class="item">item57</li>
         <li class="item">item58</li>
         <li class="item">item59</li>
         <li class="item">item60</li>
         <li class="item">item61</li>
         <li class="item">item62</li>
         <li class="item">item63</li>
         <li class="item">item64</li>
         <li class="item">item65</li>
         <li class="item">item66</li>
         <li class="item">item67</li>
         <li class="item">item68</li>
         <li class="item">item69</li>
         <li class="item">item70</li>
         <li class="item">item71</li>
         <li class="item">item72</li>
         <li class="item">item73</li>
         <li class="item">item74</li>
         <li class="item item_75">item75</li>
         <li class="item">item76</li>
         <li class="item">item77</li>
         <li class="item">item78</li>
         <li class="item">item79</li>
         <li class="item">item80</li>
         <li class="item">item81</li>
         <li class="item">item82</li>
         <li class="item">item83</li>
         <li class="item">item84</li>
         <li class="item">item85</li>
         <li class="item">item86</li>
         <li class="item">item87</li>
         <li class="item">item88</li>
         <li class="item">item89</li>
         <li class="item">item90</li>
         <li class="item">item91</li>
         <li class="item">item92</li>
         <li class="item">item93</li>
         <li class="item">item94</li>
         <li class="item">item95</li>
         <li class="item">item96</li>
         <li class="item">item97</li>
         <li class="item">item98</li>
         <li class="item item_99">item99</li>
         <li class="item item_100">item100</li>
     </ul>
 </div>
</body>
<script>
    /** 1.DOM 规范中没有涉及的一个问题是如何滚动页面中的某个区域。为填充这方面的缺失，不同浏览
     *    器实现了不同的控制滚动的方式。在所有这些专有方法中，HTML5 选择了标准化 scrollIntoView()。
     *  2.scrollIntoView()方法存在于所有 HTML 元素上，可以滚动浏览器窗口或容器元素以便包含元素进入视口。
     *    这个方法的参数如下：
     *    a.alignToTop 是一个布尔值。
     *      + true：窗口滚动后元素的顶部与视口顶部对齐。
     *      + false：窗口滚动后元素的底部与视口底部对齐。
     *    b.scrollIntoViewOptions 是一个选项对象。
     *      + behavior：定义过渡动画，可取的值为"smooth"和"auto"，默认为"auto"。
     *      + block：定义垂直方向的对齐，可取的值为"start"、"center"、"end"和"nearest"，默认为 "start"。
     *      + inline：定义水平方向的对齐，可取的值为"start"、"center"、"end"和"nearest"，默认为 "nearest"。
     *    c.不传参数等同于 alignToTop 为 true。
     *    d.这个方法可以用来在页面上发生某个事件时引起用户关注。把焦点设置到一个元素上也会导致浏览器将元素滚动到可见位置。
     * **/
    let ulDOM = document.getElementsByTagName('ul')[0];
    let liDOM99 = document.getElementsByClassName('item_99')[0];
    let liDOM75 = document.getElementsByClassName('item_75')[0];
    let liDOM52 = document.getElementsByClassName('item_52')[0];
    // 确保元素可见----滚动区域自动跳转到类 item_99 区域;
    liDOM99.scrollIntoView();
    // 目标元素与视口平齐
    setTimeout(function(){
        liDOM75.scrollIntoView(true)
    },5000);
    // 目标元素垂直方向为 start
    setTimeout(function(){
        liDOM52.scrollIntoView({block: 'start'})
    },7000);
    // 尝试将元素平滑地滚入视口
    setTimeout(function(){
        liDOM99.scrollIntoView({behavior: 'smooth', block: 'start',inline: 'center'})
    },10000);
</script>
</html>